<template>
  <view
    class="setting-row"
    hover-class="hovering"
    :class="{
      disabled,
      'plain-disabled': plainDisabled,
      'custom-row': $slots.default,
      'align-top': !alignment || alignment === 'top',
      'align-center': alignment === 'center',
    }"
    :style="padding ? `padding: ${padding}` : ''"
    @click="emit('click')"
  >
    <view class="setting-main" @click="emit('main-click')">
      <block v-if="$slots.default">
        <slot></slot>
      </block>
      <block v-else>
        <view v-if="label || $slots.label" class="setting-label" @click.stop="emit('label-click')">
          <view v-if="$slots['label-prefix']" class="label-prefix">
            <slot name="label-prefix"></slot>
          </view>
          <slot name="label"></slot>
          <text v-if="label" :class="{ selected }">{{ label }}</text>
          <view v-if="$slots['label-suffix']" class="label-suffix">
            <slot name="label-suffix"></slot>
          </view>
        </view>
        <view class="setting-extras" :class="{ 'is-button': isButtonExtra }" @click="emit('extra-click')">
          <text v-if="value !== void 0 && value !== ''" class="setting-extra setting-value">{{ value }}</text>
          <slot name="value"></slot>
          <slot name="extra"></slot>
          <text v-if="extra !== void 0 && value !== ''" class="setting-extra">{{ extra }}</text>

          <image v-if="selected" class="selected-icon" mode="aspectFit" :src="'/static/ic_params_set_select.png'" />
          <image v-if="hasArrow" class="setting-arrow" mode="aspectFit" :src="'/static/ic_right_arrow.png'" />
        </view>
      </block>
    </view>
    <view v-if="desc || $slots.desc" class="setting-desc" @click="emit('desc-click')">
      <text v-if="desc">{{ desc }}</text>
      <slot name="desc"></slot>
    </view>
  </view>
</template>

<script setup lang="ts">
defineProps<{
  label?: string | number // 显示属性名
  value?: string | number // 显示属性值
  extra?: string // 详情文本
  isButtonExtra?: boolean // extra使用文字按钮样式
  desc?: string // 描述文本
  alignment?: 'top' | 'center' // 对齐方式
  padding?: string // 自定义内边距
  bordered?: boolean // 是否显示边框
  hasArrow?: boolean // 右侧显示右箭头
  disabled?: boolean // 禁用
  plainDisabled?: boolean // 仅样式禁用
  selected?: boolean // 当前行是否被选中
}>()
const emit = defineEmits<{
  (e: 'click'): void
  (e: 'main-click'): void
  (e: 'label-click'): void
  (e: 'extra-click'): void
  (e: 'desc-click'): void
}>()
</script>

<style lang="less">
.pseudoBorder() {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: var(--horizontalGap);
  right: 0;
  width: calc(100vw - var(--horizontalGap));
  height: 1rpx;
  background-color: rgba(233, 233, 237, 1);
  z-index: 1;
}
setting-row + setting-group .setting-row::before,
setting-row + setting-row .setting-row::before {
  .pseudoBorder();
}

.setting-row {
  --horizontalGap: 32rpx;
  padding: 22rpx var(--horizontalGap);
  position: relative;
  background-color: #ffffff;
  &.plain-disabled,
  &.disabled {
    &,
    switch,
    text,
    .selected-icon,
    .setting-arrow {
      opacity: 0.6;
    }
  }
  &.disabled {
    &,
    switch,
    text,
    .selected-icon,
    .setting-arrow {
      pointer-events: none;
    }
  }
  &:last-of-type {
    &::after {
      display: none;
    }
  }
  &.align-top .setting-main {
    align-items: flex-start;
  }
  &.align-center .setting-main {
    align-items: center;
  }
  &.custom-row .setting-main {
    display: block;
  }
  .setting-main {
    display: flex;
    justify-content: space-between;
  }
  .setting-label,
  .setting-extras {
    display: flex;
    align-items: center;
  }
  .setting-label {
    justify-content: flex-start;
    font-weight: 500;
    font-size: 32rpx;
    line-height: 44rpx;
    color: #424b59;
    flex-shrink: 0;
    .label-suffix {
      color: #818790;
      font-weight: 400;
      font-size: 24rpx;
      line-height: 34rpx;
      margin-left: 16rpx;
    }
  }
  .setting-extras {
    flex: 1;
    justify-content: flex-end;
    position: relative;
    font-weight: 400;
    font-size: 32rpx;
    line-height: 44rpx;
    margin-left: 24rpx;
    color: #818790;
    flex-wrap: nowrap;
    text-align: right;
    &.is-button .setting-extra {
      color: var(--primary-color);
    }
  }
  .setting-value {
    word-break: break-all;
  }
  .selected-icon {
    width: 28rpx;
    height: 40rpx;
  }
  .setting-arrow {
    width: 16rpx;
    height: 44rpx;
    margin-left: 24rpx;
  }
  .setting-desc {
    margin-top: 4rpx;
    margin-bottom: -4rpx;
    color: #808890;
    font-weight: 400;
    font-size: 28rpx;
    line-height: 40rpx;
    max-width: 620rpx;
  }
}

.selected {
  color: var(--primary-color);
}
</style>
